<template>
	<view class="mainpadding2">
		<u-navbar title="添加客戶信息" placeholder>
			<view class="flexleft xiaohui" slot="left">
				<!-- <view class="" @click="backpage">
					<u-icon name="arrow-left" color="#333" size="28"></u-icon>
				</view> -->
				<view class="" @click="home">
					<u-icon name="home" color="#333" size="28"></u-icon>
				</view>
			</view>
			<view class="flexright xiaohui" slot="right">
				<image class="posdcimg" src="@/static/image/system/jzjz.png" mode="" v-if="id==''"
					@click="jumpurl('/pages/workbench/jiazongjz')"></image>
			</view>
		</u-navbar>
		<view class="paddinglr padding_top1 fafafa" v-if="id==''">
			<view class="header flexbetween">
				<view :class="type==1?'selects':''" @click="type=1" v-if="is_zq">自取</view>
				<view :class="type==2?'selects':''" @click="type=2" v-if="is_ny">内用</view>
				<view :class="type==0?'selects':''" @click="type=0" v-if="is_ws && hy_type==5">外送</view>
			</view>
		</view>
		<view class="mainpadding margin_top1 ffffff radius">
			<view class="flexbetween">
				<view class="titletext bold hei_text white_nowrap">客戶行動電話</view>
				<input class="main_size bold hei_text textright" type="number" placeholder="請輸入" v-model="phone">
			</view>
			<template v-if="type==2">
				<view class="flexbetween" :class="caozuo_jx==1?'margin_top1':'margin_top'" v-for="item in khlxlist"
					:key="item.id">
					<view class="titletext bold hei_text white_nowrap">{{item.name}}</view>
					<view class="flexright">
						<text class="xiaohuang margin_right1">${{item.price}}</text>
						<view class="flexbetween bghui radius" style="padding: 10rpx;">
							<view class="reduceimg" @click="reduceFn(item)"></view>
							<input type="number" style="width: 100rpx; text-align: center;" v-model="item.num">
							<view class="addimg" @click="addFn(item)"></view>
						</view>
					</view>
				</view>
				<view class="flexbetween" :class="caozuo_jx==1?'margin_top1':'margin_top'" @click="checkTab()">
					<view class="titletext bold hei_text white_nowrap">選擇桌臺</view>
					<view class="flexright">
						<input class="main_size bold margin_right hei_text textright" type="text" disabled=""
							placeholder="請輸入" v-model="shoptable_name">
						<u-icon name="arrow-right" color="#000" size="16"></u-icon>
					</view>
				</view>
			</template>
			<view class="titletext bold hei_text white_nowrap" :class="caozuo_jx==1?'margin_top1':'margin_top'">備註
			</view>
			<textarea placeholder="請輸入備註資訊" :class="caozuo_jx==1?'margin_top1':'margin_top'"
				class="huang_text main_size" v-model="beizhu"></textarea>
		</view>
		<view class="mainpadding margin_top1" style="padding: 0 30rpx;">
			<view class="submitbtn" @click="submit">確定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "", //使用id
				shop_id: uni.getStorageSync("shop_id"),
				phone: "", //客户行动电话
				beizhu: "", //备注
				shoptable_id: 0,
				shoptable_name: "",
				type: "", //1自取，2内用
				is_ny: 0,
				is_zq: 0,
				is_ws: 0,
				pos_style: 1,
				caozuo_jx: 1,
				isLoad: false,
				hy_type: 1,
				ztNum: 0, //桌臺數量
				cdbjhsf_data: [],
				khlxlist: []
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.type = 1
			}
			uni.$on("poscheckTab", data => {
				this.shoptable_id = data.id
				this.shoptable_name = data.name
			})
			this.getInfo()
			this.getkhlx()
		},
		onUnload() {
			uni.$off("poscheckTab")
		},
		onShow() {
			this.getztnum()
		},
		methods: {
			getkhlx() {
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				this.http.request('/api/cdb/cdbjhsfIndex', 'GET', {
					shop_id: uni.getStorageSync("shop_id"),
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						res.data.forEach(item => {
							this.$set(item, "num", 0)
						})
						this.khlxlist = res.data
					}
				})
			},
			reduceFn(item) { //減
				if (item.num == 0) {
					return false
				}
				item.num = item.num - 1
			},
			addFn(item) { //加
				item.num = item.num + 1
			},
			backpage() {
				uni.navigateBack(1)
			},
			home() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			getInfo() {
				this.http.request("/api/shop/Shopdeail", "POST", {
					shop_id: uni.getStorageSync("shop_id"),
				}).then(res => {
					uni.setStorageSync("appkey", res.data.appkey)
					uni.setStorageSync("hy_type", res.data.hy_type)
					uni.setStorageSync("opentable_status", res.data.opentable_status)
					uni.setStorageSync("is_sdkfp", res.data.is_sdkfp)
					uni.setStorageSync("is_call_sdkfp", res.data.is_call_sdkfp)
					uni.setStorageSync("is_pos_sdkfp", res.data.is_pos_sdkfp)
					uni.setStorageSync("houtel_type", res.data.houtel_type)
					this.is_ny = res.data.is_ny
					this.is_zq = res.data.is_zq
					this.is_ws = res.data.is_ws
					this.hy_type = res.data.hy_type
					if (res.data.is_zq) {
						this.type = 1
					}
					this.pos_style = res.data.pos_style //pos_style=1pos畫面，2列表畫面
					this.caozuo_jx = res.data.caozuo_jx //caozuo_jx=1手機，2平板
				})
			},
			async getztnum() { //使用列表
				let res = await this.http.request('/api/shop/listtable', 'POST', {
					shop_id: this.shop_id, //店鋪id
				})
				if (res.code == 1) {
					this.ztNum = res.data.length
				} else {
					this.ztNum = 0
				}
			},
			checkTab() {
				if (this.ztNum == 0) {
					this.http.toast("暫無桌臺，請添加桌臺后操作")
					return false
				}
				let num = 0
				this.khlxlist.forEach(item => {
					this.cdbjhsf_data.push({
						name: item.name,
						num: item.num,
						price: item.price,
						total_price: item.num * item.price
					})
					num = item.num + num
				})
				if (num == 0) {
					this.http.toast("請至少填寫一個人數！")
					return false
				}
				uni.navigateTo({
					url: "/pages/goodsOrder/poszt?num=" + num
				})
			},
			async submit() { //确定
				if (this.type === "" && this.id == "") {
					this.http.toast("請先選擇類型")
					return false
				}
				if (this.type == 2 && this.shoptable_id == 0 && this.ztNum != 0 && this.id == "") {
					this.http.toast("請選擇桌臺")
					return false
				}
				let num = 0
				this.khlxlist.forEach(item => {
					num = item.num + num
				})
				if (this.type == 2 && num == 0) {
					this.http.toast("請至少填寫一個人數！")
					return false
				}
				let res = await this.http.request("/api/ordergoods/tableAddGoods", 'POST', {
					shoptable_id: this.id || this.shoptable_id, //使用id
					shop_id: this.shop_id,
					mobile: this.phone, //客户行动电话
					cdbjhsf_data: this.cdbjhsf_data,
					beizhu: this.beizhu, //备注
					type: this.type,
					order_attr: 2
				})
				this.http.toast(res.msg)
				if (res.code == 1) {
					uni.setStorageSync("order_goods_id", res.data.order_id)
					uni.redirectTo({
						url: "/pages/callOutOrder/xuanzefw?posdc=1"
					})
					return false
					if (this.pos_style == 1) {
						setTimeout(() => {
							uni.redirectTo({
								url: "/pages/index/pos?posdc=1"
							})
						}, 500)
					} else {
						setTimeout(() => {
							uni.redirectTo({
								url: "/pages/callOutOrder/xuanzefw?posdc=1"
							})
						}, 500)
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.posdcimg {
		width: 200rpx;
		height: 60rpx;
	}

	.header {
		padding: 6rpx;
		box-sizing: border-box;
		background: #F1F1F1;
		border-radius: 72rpx 72rpx 72rpx 72rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;

		view {
			width: 45%;
			height: 58rpx;
			line-height: 58rpx;
			text-align: center;
			background: #F1F1F1;
			border-radius: 72rpx 72rpx 72rpx 72rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #666666;
		}

		.selects {
			width: 45%;
			height: 58rpx;
			line-height: 58rpx;
			text-align: center;
			background: #fff3e6;
			border-radius: 72rpx 72rpx 72rpx 72rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #FF8505;
		}
	}
</style>